<!DOCTYPE html><html>
<head>
<title>Drag and Drop Example</title>
<style>
  .parent3{
    width: 30vw;
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  }
	.box {
    width: 100px;
    height: 100px;
    color: white;
    font-size: 40px;
    margin: 10px;
    display: inline-block;
	}
  .box1 {
    grid-area: 1 / 1 / 2 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box2 {
    grid-area: 1 / 2 / 2 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box3 {
    grid-area: 1 / 3 / 2 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box4 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box5 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box6 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box7 {
    grid-area: 3 / 1 / 4 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box8 {
    grid-area: 3 / 2 / 4 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box9 {
    grid-area: 3 / 3 / 4 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }
</style>
</head>
<body>
  <div class="parent3">

    <div class="box box1" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">1</div>
    <div class="box box2" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">2</div>
    <div class="box box3" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">3</div>
    <div class="box box4" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">4</div>
    <div class="box box5" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">5</div>
    <div class="box box6" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">6</div>
    <div class="box box7" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">7</div>
    <div class="box box8" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">8</div>
    <div class="box box9" draggable="true"ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">9</div>
  </div>
	
<script>
	function allowDrop(ev) {
        ev.preventDefault();
    }
    var srcdiv = null;
    var temp = null;
    //当拖动时触发
    function drag(ev, divdom) {
        srcdiv = divdom;
        temp = divdom.innerHTML;
    }
    //当拖动完后触发
    function drop(ev, divdom) {
        ev.preventDefault();
        if (srcdiv !== divdom) {
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML = temp;
        }
    }
</script>
</body>
</html>